<template>
	<view :class="active.index===''?'bodys':'body'">
		<view :class="active.input!==''?'inputss':'inputs'" @tap="searchs">
			<img src="./static/index/搜索.png" alt="" class="imgs">
			<input type="text" class="input" :class="active.index===''?'uni-input':'input'" placeholder="搜索你要找的商品"
				placeholder-style="font-size: 30rpx;" v-model.trim='searchAll' />
			<button class="button" @tap="seek" v-if="active.index===''">搜索</button>
			<button class="buttons" v-if="active.index===''" @tap.stop="message">取消</button>
		</view>

		<!-- 最近搜索 -->
		<view class="recently" v-if="arr.length && active.index===''">
			<view>
				<span class="info">最近搜索</span>
				<span @tap='del'>
					<img class="trash" src="./static/index/垃圾桶.png" alt="">
				</span>
			</view>
			<view class="record">
				<view class="recordItem" v-for="(item,index) in arr" :key="index" @tap="searchFor(item)">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app'

	// onLoad(() => {
	// 	arr.value = uni.getStorageSync('search') || []
	// })
	// 点击历史记录跳转
	const searchFor = (item) => {
		searchAll.value = item
		uni.navigateTo({
			url: '/pages/index/components/list?name=' + item
		})
	}

	// 清空历史记录
	const del = () => {
		uni.clearStorageSync('')
		arr.value = []
	}

	// input状态切换
	const active = ref({
		input: '',
		index: 'active'
	})
	const searchs = () => {
		active.value.index = ''
		active.value.input = 'active'
		arr.value = uni.getStorageSync('search') || []
	}

	// 点击搜索 存储记录
	const searchAll = ref('')
	const arr = ref([])
	const seek = () => {
		if (searchAll.value === '') return
		let info = searchAll.value
		arr.value.unshift(info)
		arr.value = [...new Set(arr.value)]
		// console.log(arr);
		uni.setStorageSync('search', arr.value)
		uni.navigateTo({
			url: '/pages/index/components/list?name=' + info
		})
	}

	// 返回首页
	const emit = defineEmits(['message'])
	const message = () => {
		active.value.index = 'active'
		active.value.input = ''
		searchAll.value = ''
		// console.log(active.value);
		emit('message', false)
	}
</script>

<style lang="scss" scoped>
	// 最近搜索
	.recently {
		width: 100%;
		height: 100rpx;
	}

	.recently .info {
		line-height: 100rpx;
		color: #8a8a8a;
		margin-left: 30rpx;
	}

	.recently .trash {
		width: 40rpx;
		height: 40rpx;
		float: right;
		margin-top: 30rpx;
		margin-right: 30rpx;
	}

	.recently .record {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		// justify-content: center;
	}

	.recently .record .recordItem {
		width: 210rpx;
		height: 50rpx;
		background-color: #fff;
		border-radius: 50rpx;
		margin: 0 20rpx 20rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 24rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
	}


	// 控制显示隐藏
	.active {
		display: none;
	}

	.inputss {
		width: 100%;
		height: 100rpx;
		display: flex;
		// justify-content: center;
		position: relative;
		background-color: #ebebeb;
	}

	.uni-input {
		background-color: #fff;
		border-radius: 10rpx;
		height: 70rpx;
		width: 432rpx;
		margin-top: 15rpx;
		padding-left: 65rpx;
		margin-left: 20rpx;
	}

	.button {
		width: 120rpx;
		height: 70rpx;
		background-color: #fa2209;
		position: absolute;
		top: 15rpx;
		right: 139rpx;
		border-radius: 0;
		color: #fff;
		text-align: center;
		line-height: 70rpx;
		font-size: 26rpx;
	}

	.buttons {
		width: 120rpx;
		height: 70rpx;
		background-color: #fa2209;
		position: absolute;
		top: 15rpx;
		right: 18rpx;
		border-radius: 0;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		color: #fff;
		text-align: center;
		line-height: 70rpx;
		font-size: 26rpx;
	}

	.bodys {
		background-color: #ebebeb;
		width: 100%;
		height: 1400rpx
	}

	// index页
	// 搜索框
	.inputs {
		width: 100%;
		height: 100rpx;
		// background-color: #f1f1f2;
		display: flex;
		justify-content: center;
		position: relative;
	}

	.inputs .uni-view {
		background-color: #fff;
		border-radius: 30rpx;
		height: 70rpx;
		width: 650rpx;
		margin-top: 15rpx;
		padding-left: 70rpx;
		color: #999;
		line-height: 70rpx;
	}

	.inputs .input {
		background-color: #fff;
		border-radius: 30rpx;
		height: 70rpx;
		width: 650rpx;
		margin-top: 15rpx;
		padding-left: 65rpx;
	}

	.imgs {
		width: 45rpx;
		height: 45rpx;
		position: absolute;
		top: 27rpx;
		left: 35rpx;
	}

	// 背景色
	.body {
		background-color: #e7e7e7;
		height: 100%;
	}




	// 搜索框
	// .inputs {
	// 	width: 100%;
	// 	height: 100rpx;
	// 	// background-color: #f1f1f2;
	// 	display: flex;
	// 	justify-content: center;
	// 	position: relative;
	// }

	// .inputs .uni-input {
	// 	background-color: #fff;
	// 	border-radius: 10rpx;
	// 	height: 70rpx;
	// 	width: 650rpx;
	// 	margin-top: 15rpx;
	// 	padding-left: 65rpx;
	// }

	// .imgs {
	// 	width: 45rpx;
	// 	height: 45rpx;
	// 	position: absolute;
	// 	top: 27rpx;
	// 	left: 35rpx;
	// }

	// .buttons {
	// 	width: 170rpx;
	// 	height: 70rpx;
	// 	background-color: #fa2209;
	// 	position: absolute;
	// 	top: 15rpx;
	// 	right: 18rpx;
	// 	border-radius: 0;
	// 	border-top-right-radius: 5px;
	// 	border-bottom-right-radius: 5px;
	// 	color: #fff;
	// 	text-align: center;
	// 	line-height: 70rpx;
	// 	font-size: 30rpx;
	// }
</style>